<template>
  <div class="app-container home-container">
    <!-- 轮播图 -->
    <el-carousel
      :interval="5000"
      height="400px"
      class="carousel"
    >
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.image" class="carousel-image">
      </el-carousel-item>
    </el-carousel>

    <!-- 作品展示 -->
    <div class="works-section">
      <h2 class="section-title">最新作品</h2>
      <el-row :gutter="20" class="work-list">
        <el-col
          v-for="(work,index) in paginatedWorks"
          :key="work.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
        >
          <el-card
            class="work-card"
            :body-style="{ padding: '10px' }"
            shadow="hover"
            @click.native="$router.push({
              name: 'OpusDetailPage', // 使用子级路由名称
              params: { id: work.opusId }
            })"
          >
            <el-image
              class="work-cover"
              :src="work.opusCover"
              fit="cover"
              :lazy="true"
              :preview-src-list="[work.opusCover]"
            >
              <div slot="placeholder" class="image-slot">
                加载中...
              </div>
            </el-image>
            <div class="work-info">
              <h3 class="work-title">标题: {{ work.opusTitle }}</h3>
              <p class="work-author">分类: {{ TopicNames[index] }}</p>
              <p class="work-author">作者: {{ UserNames[index] }}</p>
              <p class="work-author">创建时间: {{ work.createTime }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页组件 -->
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="totalWorks"
        :page-sizes="[6, 8, 10]"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/opus'

export default {
  data() {
    return {
      banners: [
        { image: 'https://images.pexels.com/photos/2286895/pexels-photo-2286895.jpeg?cs=srgb&dl=pexels-rfera-2286895.jpg&fm=jpg' },
        { image: 'https://images.pexels.com/photos/2174974/pexels-photo-2174974.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' },
        { image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6_21waVZZQMZWm4nfYd7WlQGlfbjYgHHGNQ&s' }
      ],
      works: [],
      UserNames: [],
      TopicNames: [],
      currentPage: 1,
      pageSize: 6,
      totalWorks: 0
    }
  },
  computed: {
    paginatedWorks() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.works.slice(start, end)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await getList({
        pageNum: this.currentPage,
        pageSize: this.pageSize
      })
      this.works = res.opusPage.records
      this.totalWorks = res.opusPage.total
      this.UserNames = res.UserNames
      this.TopicNames = res.TopicNames
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1 // 切换每页数量时重置页码
    },
    handleCurrentChange(page) {
      this.currentPage = page
    }
  }
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.carousel {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  display: block;
}

.work-list {
  margin-top: 30px;
}

.work-card {
  transition: all 0.3s ease;
  margin-bottom: 20px;
  cursor: pointer;
}

.work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.work-cover {
  height: 200px;
  width: 100%;
}

.work-info {
  padding: 10px;
}

.work-title {
  font-size: 16px;
  margin-bottom: 8px;
  color: #324057;
}

.work-author {
  color: #606266;
  font-size: 13px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 20px;
}
</style>
